 <template>
  <el-container>
    <el-main>
      <el-row class="table-wrapper">   
        <el-col :span='24'>  
        <el-form :inline="true" :model="giftCreateForm" class="demo-form-inline">
          <el-form-item label="礼品名称">
            <el-input v-model="giftCreateForm.name" placeholder="名称"></el-input>
          </el-form-item>
          <el-form-item label="礼品描述">
            <el-input v-model="giftCreateForm.desc" placeholder="描述"></el-input>
          </el-form-item>
          <el-form-item label="礼品成本">
            <el-input v-model="giftCreateForm.costPrice" placeholder="成本"></el-input>
          </el-form-item>
          <el-form-item label="分站">
            <el-select v-model="giftCreateForm.namespace">
              <el-option
                v-for="site in allSites"
                :key="site.namespace"
                :label="site.namespaceDesc"
                :value="site.namespace">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">创建</el-button>
          </el-form-item>
        </el-form>
        </el-col>
      </el-row>

      <div class="table_container">
          <el-table
                v-loading="tableLoading"
                :data="giftList"
                style="width: 100%">
                <el-table-column 
                  label="分站"
                  prop="namespace" 
                  width="180">
                </el-table-column>
                <!-- <el-table-column 
                    label="ID"
                    prop="id"
                    width="100">
                </el-table-column> -->
                <el-table-column 
                    label="名称" 
                    prop="resource" 
                    width="180">
                </el-table-column>
                <el-table-column 
                  label="描述"
                  prop="resourceDesc" 
                  width="180">
                </el-table-column>
                <el-table-column 
                  label="成本"
                  width="180">
                  <template slot-scope="scope">
                  <div v-if="scope.$index == editedRow">
                    <el-input v-model="costPrice" placeholder="价格"></el-input>
                  </div>
                  <div v-if="scope.$index != editedRow">
                  {{(scope.row.costPrice / 100).toFixed(2)}}
                  </div>
                  </template>
                </el-table-column>
                
                <!-- <el-table-column 
                  label="状态"
                  prop="status" 
                  width="180">
                </el-table-column> -->
                <el-table-column label="编辑" width="180">
                    <template slot-scope="scope">
                      <el-button size="small" type="primary" @click="changeGiftStatus(scope.$index)" v-if="scope.row.status !== 'ENABLE'">上架</el-button>
                      <el-button size="small" type="primary" @click="changeGiftStatus(scope.$index)" v-if="scope.row.status === 'ENABLE'">下架</el-button>
                  </template>
                </el-table-column>
                <el-table-column label="" width="180" v-if="role === 'SUPER_ADMIN'">
                    <template slot-scope="scope">
                      <el-button size="small" type="primary" @click="handleEdit(scope.$index)" v-show="scope.$index != editedRow">编辑</el-button>
                      <el-button size="small" type="primary" @click="handleEditOk(scope.$index)" v-show="scope.$index == editedRow">确定</el-button>
                      <el-button size="small" type="primary" @click="handleEditCancel(scope.$index)" v-show="scope.$index == editedRow">取消</el-button>  
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </el-main>
  </el-container>
</template>

<script>
    import {createGift, getGiftList, updateGift} from '@/api/gift'
    import {allSite} from '@/api/site'
  import { mapState } from 'vuex';

    export default {
      data () {
        return {
          giftCreateForm: {
            name: '',
            desc: '',
            costPrice: '',
            namespace: ''
          },
          costPrice: '',
          editedRow: -1,
          giftList: [],
          tableLoading: false
        }
      },
      computed: {
        ...mapState('manage', ['allSites']),
        ...mapState(['role'])
      },
      mounted () {
        // this.initData();
        this.refreshGiftList()
      },
      methods: {
        async onSubmit () {
          const loading = this.$loading({
            lock: true,
            text: '正在加载',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          })

          try {
            let form = Object.assign({}, this.giftCreateForm)
            form.costPrice = (form.costPrice * 100).toFixed(0)
            let result = await createGift(form.name, form.desc, form.costPrice, form.namespace)
            if (result.status === 200) {
              this.refreshGiftList()
            } else {
              throw new Error('创建失败')
            }
          } catch (err) {
            console.log(err)
          }
          loading.close()
        },

        async refreshGiftList () {
          this.editedRow = -1
          this.tableLoading = true
          try {
            const result = await getGiftList(true)
            if (result.status === 200 && result.data.code === 200) {
              this.giftList = result.data.data
            } else {
              throw new Error('获取数据失败')
            }
          } catch (err) {
            // this.$message.error('列表获取失败')
            console.log('获取数据失败', err)
          }
          this.tableLoading = false
        },
        async changeGiftStatus (index) {
          try {
            let gift = this.giftList[index]
            let status = gift.status !== 'ENABLE' ? 'ENABLE' : 'CANCELED'

            const result = await updateGift(gift.id, gift.costPrice, status)
            if (result.status === 200 && result.data.code === 200) {
              this.refreshGiftList()
            } else {
              throw new Error('获取数据失败')
            }
          } catch (err) {
            // this.$message.error('更新失败')
            console.log('获取数据失败', err)
          }
        },
        handleEdit (row) {
          this.editedRow = row
          let priceRow = this.giftList[row]
          this.costPrice = priceRow.costPrice / 100
          // this.status = priceRow.status
        },

        async handleEditOk (row) {
          try {
            const result = await updateGift(this.giftList[row].id, (this.costPrice * 100).toFixed(0), this.giftList[row].status)
            if (result.status === 200 && result.data.code === 200) {
              this.giftList[row].costPrice = (this.costPrice * 100).toFixed(0)
              // this.priceList[row].status = this.status
              this.editedRow = -1
            } else {
              throw new Error('获取数据失败')
            }
          } catch (err) {
            // this.$message.error('更新失败')
            console.log('获取数据失败', err)
          }
        },

        handleEditCancel (row) {
          this.editedRow = -1
        },
      }
    }
</script>

 <style lang="less" scoped>
    @import '../../style/mixin';
    .main {
        margin: 0 30px;
    }

    .table-wrapper {
        border: 1px solid #ebeef5;
        margin: 30px 0;
        padding-top: 20px;
        padding-left: 10px;
    }

    .table-row {
        border-bottom-width: 1px;
        border-bottom-color: #ebeef5;
        border-bottom-style: solid;
    }

    .table-cell {
        margin: 10px 20px;
        // min-height: 48px;
        // border-right-width: 1px;
        // border-right-color: #ebeef5;
        // border-right-style: solid;
    }

    .table-header {
        min-height: 48px;
        border-bottom-width: 1px;
        border-bottom-color: #ebeef5;
        border-bottom-style: solid;
        background: #f6f6f6;
    }
    .table-header-title {
        margin-left: 10px;
    }

</style>
